<template>
  <main class="right-view">
    <RightHeader></RightHeader>

    <ContentTitle title="Surprise" svg-icon-class="icon-site"></ContentTitle>
    <RightProjects :projects="surpriseList"></RightProjects>

    <ContentTitle title="Projects" svg-icon-class="icon-projects"></ContentTitle>
    <section
      v-for="({time, projects}) in timelineLinkProjects"
      :key="time">
      <p class="time-wrap">{{time}}</p>
      <RightProjects
        :projects="projects"
        item-class-name="project"
        @click="handleClick"></RightProjects>
    </section>

    <ContentTitle title="Fragments" svg-icon-class="icon-fragments"></ContentTitle>
    <!-- <RightFragments></RightFragments> -->
    <RightFragments2></RightFragments2>

    <!-- <ContentTitle title="Mystery Box" svg-icon-class="icon-mystery-box"></ContentTitle>
    <RightMysteryBox></RightMysteryBox> -->

    <ContentTitle title="School" svg-icon-class="icon-school"></ContentTitle>
    <RightSchool></RightSchool>

    <ContentTitle title="Skills" svg-icon-class="icon-skills"></ContentTitle>
    <RightSkills></RightSkills>

    <base-dialog
      v-model="visible"
      :title="projectInfo.title">
      <template #title>
        <section class="dialog__title">
          <h1 class="title">{{projectInfo.title}}</h1>
          <p class="tag" v-for="(tag, index) in projectInfo.tags" :key="index">
            {{tag}}
          </p>
        </section>
      </template>
      <section class="dialog__content">
        <base-card v-if="projectInfo.bac" title="项目背景" class="mt-12">
          <ul>
            <li
              v-for="(item, index) in formatData(projectInfo.bac)" :key="index"
              class="item__content">
              {{item}}
            </li>
          </ul>
        </base-card>

        <base-card v-if="projectInfo.target" title="项目目标" class="mt-12">
          <ul>
            <li
              v-for="(item, index) in formatData(projectInfo.target)" :key="index"
              class="item__content">
              {{item}}
            </li>
          </ul>
        </base-card>

        <base-card v-if="projectInfo.jobContent" title="主要工作内容" class="mt-12">
          <ul>
            <li
              v-for="(item, index) in formatData(projectInfo.jobContent)" :key="index"
              class="item__content">
              {{item}}
            </li>
          </ul>
        </base-card>

        <base-card v-if="projectInfo.result" title="成果展示" class="mt-12">
          <ul>
            <li
              v-for="(item, index) in formatData(projectInfo.result)" :key="index"
              class="item__content">
              {{item}}
            </li>
          </ul>
        </base-card>
      </section>
    </base-dialog>
  </main>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import ContentTitle from '@/components/content-title/index.vue'
  import type { Project } from '@/types/index'
  import RightHeader from './right-header.vue'
  import RightProjects from './right-projects.vue'
  import RightSkills from './right-skills.vue'
  // import RightFragments from './right-fragments.vue'
  import RightFragments2 from './right-fragments2.vue'
  // import RightMysteryBox from './right-mystery-box.vue'
  import RightSchool from './right-school.vue'

  import {getSurpriseData} from '@/api/surprise'
  import {getProjectInfo, getTimelineLinkData} from '@/api/projects'

  const surpriseList = getSurpriseData()
  const timelineLinkProjects = getTimelineLinkData()

  const visible = ref(false)
  const projectInfo = ref({} as Project)
  const handleClick = (info:Project) => {
    visible.value = true
    projectInfo.value = {
      ...getProjectInfo(info.id)
    } as Project
  }

  const formatData = (data: string | undefined) => {
    return data?.split('\n')
  }
</script>

<style scoped lang="scss">
.mt-12 {
  margin-top: 12px;
}

.right-view {
  width: calc(100% - 250px);
  display: flex;
  padding: 20px;
  position: relative;
  padding-bottom: 50px;
  flex-direction: column;

  .time-wrap {
    padding-left: 12px;
    box-sizing: border-box;
  }
}

.dialog__title {
  display: flex;
  align-items: center;
  .title {
    font-size: 16px;
    font-weight: 500;
  }
  .tag {
    font-size: 12px;
    padding: 1px 4px;
    color: #FF9500;
    background-color: #FFF4E5;
    border: 1px solid #FFEAC2;
    margin-left: 6px;
    border-radius: 4px;
  }
}
.dialog__content {
  padding: 0 12px 12px;
  box-sizing: border-box;
  .item__content {
    font-size: 14px;
    line-height: 22px;
    margin-top: 10px;
  }
}
</style>
